<template>
  <!-- 员工 -->
    <div class='employees alltable'>
        <div class="tabbar">
            <div class='let'>
                 <Select v-model="model1" placeholder="在职状态" class="service" style="width:200px">
                    <Option v-for="item in onthejoblist" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
                <!-- <Input prefix="ios-search"  v-model="value" placeholder="请输入关键字" style="width: 300px" /> -->
                <Button class="btn_default" @click="search"><Icon type="ios-search" size="17" class="icon_wy"/>查询</Button>
            </div>
            <div class='rit'>
                <Button class="btn_default" @click="getHrpEmployeePageData(1,'reset')"><Icon type="ios-refresh" size="22" class="icon_wy" style='vertical-align: -5px;'/>重置刷新</Button>
                <Button @click="announcement_modal_show"><Icon type="ios-add-circle-outline" size="17" class="icon_wy"/>添加员工</Button>
            </div>
        </div>
       <div class='tabble'>
            <div><Table :columns="columns" :loading="tab_loading" height="560" :data="data.datas" class="sel_table"></Table></div>
        </div>

        <div class='tab_pages'>
            <Page :total="data.allCount" :page-size="data_axios.pageSize" :current.sync="data_axios.pageIndex"  show-total  @on-change="getHrpEmployeePageData"></Page>
        </div>
        
        

    </div>
</template>

<script>
import { Checkbox } from "iview";
import {
  getHrpEmployeePageData,
  deleteHrpEmployee,
  getParentDepartment,
  getSysRoleByOrgnizeid,
  addHrpEmployee,
  updateHrpEmployee
} from "../../../apis/api_users.js";
import { mapGetters, mapState } from "vuex";
import { validatePhone } from "../../../utils/validate.js";

export default {
  name: "employees",
  data() {
    return {
      model1: "",
      data: {
        allCount: 0,
        currPage: 1,
        datas: [],
        pageCount: 0,
        pageSize: 0
      },
      organizeid: "",
      tab_loading: false,
      data_axios: {
        pageSize: 10,
        pageIndex: 1,
        merchantid: "",
        realname: "",
        mobilephone: "",
        perstatus: "",
        userid: ""
      },
      
      
     
      onthejoblist: [
        { label: "在职", value: 1 },
        { label: "已离职", value: 2 },
        // { label: "未知", value: 0 },
        // { label: "外部人员", value: 3 }
      ],
      
      columns: [
        {
          title: "#",
          key: "name",
          type: "index",
          width: 50
        },
        {
          title: "姓名",
          key: "realname"
        },
        {
          title: "性别",
          key: "gendername"
        },
        {
          title: "手机号",
          key: "mobilephone"
        },
        {
          title: "是否维修工",
          key: "isrepairedworker"
        },
        {
          title: "所在部门",
          key: "depart"
        },
        {
          title: "所在角色",
          key: "duty"
        },
        {
          title: "在职状态",
          key: "perstatusname"
        },
        {
          title: "操作",
          key: "",
          width: 200,
          render: (h, params) => {
            let self = this;
            return (
              <div class="lastcoll">
                <i
                  on-click={() => self.setmodal_edit(params)}
                  class="ivu-icon ivu-icon-ios-create-outline icon_weight"
                  title="修改"
                >
                  修改
                </i>
                <i
                  on-click={() => self.del(params)}
                  class="ivu-icon ivu-icon-ios-trash-outline icon_weight"
                  title="删除"
                >
                  删除
                </i>
              </div>
            );
          }
        }
      ],
      announcement_modal1: false,
      announcement_modal_loading: false,
      modal_edit: false,
      modal_loading_edit: false
    };
  },
  computed: { ...mapGetters(["userdata", "pageSize"]) },
  mounted() {
    this.organizeid = this.userdata.organizeid;
    this.data_axios.merchantid = this.userdata.merchantid;
    this.data_axios.userid = this.userdata.userid;

    // this.data_axios.pageSize = this.pageSize;
    this.fix_data.modifyuserid = this.userdata.userid;
    this.fix_data.modifyusername = this.userdata.realname;
    
    this.getHrpEmployeePageData();
    //   查询部门
    this.getParentDepartment(this.organizeid);
    //   查询角色
    this.getSysRoleByOrgnizeid(this.organizeid);
  },
  methods: {
    //   添加
    announcement_modal_show() {
      this.add_data={
        realname: "",
        gender: "",
        mobilephone: "",
        isrepairedworker: "",
        departid: "",
        dutyid: "",
        perstatus: "",
        createuserid: "",
        createusername: "",
        enabledmark: 1,
        userid: ""
      };
      this.announcement_modal_loading=false;
      this.announcement_modal1 = true;
    },
    getParentDepartment(data) {
      getParentDepartment({ organizeid: data }).then(({ msg, data, code }) => {
        if (code == 0) {
          this.isbumen = data;
        } else {
          this.isbumen = [];
        }
      });
    },
    getSysRoleByOrgnizeid(data) {
      getSysRoleByOrgnizeid({ organizeid: data }).then(
        ({ msg, data, code }) => {
          if (code == 0) {
            this.isjuese = data;
          } else {
            this.isjuese=[];
          }
        }
      );
    },
    sure_add(from) {
      this.$refs["add_data"].validate(valid => {
        if (valid) {
          this.addHrpEmployee(from);
        }
      });
    },
    addHrpEmployee(from) {
      this.announcement_modal_loading=true;
      addHrpEmployee(from).then(({ msg, data, code }) => {
        if (code == 0) {
          this.$Message.success(msg);
          this.getHrpEmployeePageData();
          this.announcement_modal1 = false;
          //  this.$refs[from].resetFields();
          this.add_data = {
            realname: "",
            gender: "",
            mobilephone: "",
            isrepairedworker: "",
            departid: "",
            dutyid: "",
            perstatus: "",
            createuserid: this.userdata.createuserid,
            createusername: this.userdata.createusername,
            enabledmark: 1,
            userid: this.userdata.userid
          };
        } else {
           this.$Message.warning(msg);
        }
        this.announcement_modal_loading=false;
      });
    },
    //   加载表格
    getHrpEmployeePageData(pageIndex = 1,reset) {
      if (reset) {
        this.model1="";
        this.data_axios.perstatus="";
      }
      this.data_axios.pageIndex = pageIndex;
      this.tab_loading = true;
      getHrpEmployeePageData(this.data_axios).then(({ msg, data, code }) => {
        if (code == 0) {
          for (let index = 0; index < data.datas.length; index++) {
            if (data.datas[index].isrepairedworker == 1) {
              data.datas[index].isrepairedworker = "是";
            } else {
              data.datas[index].isrepairedworker = "否";
            }
          };
          this.data = data;
          // this.$Message.success(msg);
        } else {
          // this.$Message.error(msg);
          this.data = [];
        }
        this.tab_loading = false;
      });
    },
    search() {
      this.data_axios.perstatus = this.model1;
      this.getHrpEmployeePageData();
    },
    // 删除
    del(params) {
      this.$Modal.confirm({
        title: "确认提醒",
        content: "<p>确认删除这条员工信息？</p>",
        onOk: () => {
          this.deleteHrpEmployee(params);
        }
      });
    },
    deleteHrpEmployee(data) {    
      deleteHrpEmployee({ emplyidList: data.row.emplyid }).then(
        ({ msg, data, code }) => {
          if (code == 0) {
            this.$Message.success(msg);
            // 删除成功，重新加载表格
            this.getHrpEmployeePageData();
          } else {
            this.$Message.error(msg);
          }
          this.tab_loading = false;
        }
      );
    },
    // 修改显示
    setmodal_edit(params) {
      var data = JSON.parse(JSON.stringify(params.row));
      this.fix_data.realname = data.realname;
      this.fix_data.mobilephone = data.mobilephone;
      this.fix_data.gender = data.gender;
      if (data.isrepairedworker == "是") {
        data.isrepairedworker = 1;
      } else {
        data.isrepairedworker = 0;
      }
      this.fix_data.isrepairedworker = data.isrepairedworker;
      this.fix_data.departid = data.departid;
      this.fix_data.dutyid = data.dutyid;
      this.fix_data.perstatus = data.perstatus;
      this.fix_data.emplyid = data.emplyid;

      this.modal_loading_edit=false;
      this.modal_edit = true;
    },
    // 修改
    updateHrpEmployee(){
      this.modal_loading_edit = true;
      updateHrpEmployee(this.fix_data).then(
        ({ msg, data, code }) => {
          if (code == 0) {
            this.$Message.success(msg);
            // 修改成功，重新加载表格
            this.getHrpEmployeePageData();
            this.modal_edit=false;
          } else {
            this.$Message.warning(msg);
          }
          this.modal_loading_edit = false;
        }
      );
    }
  }
};
</script>

